<script setup>
// 狗狗饮食主题数据
const nutritionTopics = [
  {
    id: 1,
    title: '狗狗的基本营养需求',
    image: 'https://picsum.photos/id/1080/600/400',
    content: `狗狗需要均衡的营养来维持健康的身体和活力。了解它们的基本营养需求是提供适当饮食的第一步。

**关键营养素：**

1. **蛋白质**：狗狗身体的重要组成部分，对于肌肉生长、修复和免疫系统功能至关重要。优质蛋白质来源包括鸡肉、牛肉、鱼肉和鸡蛋等。

2. **脂肪**：提供能量和必需脂肪酸，有助于皮肤和毛发健康。适量的脂肪对于狗狗的整体健康非常重要。

3. **碳水化合物**：提供能量，帮助狗狗维持体力和活力。复杂碳水化合物（如全麦、糙米）比简单碳水化合物更健康。

4. **维生素和矿物质**：狗狗需要各种维生素和矿物质，如维生素A、D、E、钙、磷等，以支持身体的各种功能。

5. **水**：保持狗狗身体的水分平衡，对于消化、体温调节和废物排出至关重要。确保狗狗随时都能获得新鲜的水。`
  },
  {
    id: 2,
    title: '选择适合的狗粮',
    image: 'https://picsum.photos/id/1072/600/400',
    content: `市场上有各种不同类型的狗粮，选择适合你的狗狗的狗粮需要考虑多个因素。

**选择要点：**

1. **根据年龄选择**：幼犬、成年犬和老年犬有不同的营养需求，选择专门为特定年龄段设计的狗粮。

2. **根据体型选择**：小型犬、中型犬和大型犬的营养需求和饮食量也不同，选择适合狗狗体型的狗粮。

3. **根据健康状况选择**：如果狗狗有特定的健康问题（如过敏、肥胖、关节问题等），选择专门为这些问题设计的处方粮或特殊配方粮。

4. **查看成分列表**：选择以优质蛋白质为主要成分的狗粮，避免含有大量填充物、人工添加剂和防腐剂的产品。

5. **咨询兽医**：如果你不确定选择哪种狗粮，咨询兽医的建议，他们可以根据狗狗的具体情况提供专业指导。`
  },
  {
    id: 3,
    title: '自制狗狗食物指南',
    image: 'https://picsum.photos/id/1060/600/400',
    content: `一些主人选择自制狗狗食物，这可以让你更好地控制狗狗的饮食，但需要注意营养均衡。

**自制食物要点：**

1. **均衡营养**：确保自制食物包含狗狗所需的所有营养素，包括蛋白质、脂肪、碳水化合物、维生素和矿物质。

2. **安全食材**：了解哪些人类食物对狗狗是安全的，哪些是有毒的（如巧克力、洋葱、葡萄等）。

3. **适量喂食**：控制食物的分量，避免狗狗过度进食导致肥胖。

4. **烹饪方法**：选择健康的烹饪方法，如煮、蒸，避免油炸和添加过多的盐、糖和调味料。

5. **定期检查**：定期带狗狗去兽医处检查，确保自制食物满足它们的营养需求。`
  },
  {
    id: 4,
    title: '狗狗健康饮食小贴士',
    image: 'https://picsum.photos/id/1084/600/400',
    content: `除了选择合适的食物，还有一些其他因素会影响狗狗的饮食健康。

**健康饮食提示：**

1. **规律喂食**：建立规律的喂食时间表，每天在固定的时间喂食，这有助于狗狗的消化和代谢。

2. **控制零食**：适量给予零食，避免过多的零食导致狗狗挑食或肥胖。选择健康的狗狗零食，或使用少量的水果和蔬菜作为奖励。

3. **监测体重**：定期监测狗狗的体重，确保它们保持在理想的体重范围内。如果发现体重异常变化，及时咨询兽医。

4. **缓慢换粮**：如果需要更换狗粮，逐渐过渡，避免突然换粮导致肠胃不适。

5. **特殊时期饮食**：在狗狗的特殊时期（如怀孕、哺乳、生病等），调整它们的饮食，提供额外的营养支持。`
  }
]

// 狗狗年龄饮食建议
const ageDietaryAdvice = [
  {
    id: 1,
    stage: '幼犬期（0-12个月）',
    advice: '幼犬需要高能量、高蛋白质的食物来支持快速生长和发育。选择专门为幼犬设计的狗粮，按照包装上的喂食指南进行喂食。',
    icon: 'https://picsum.photos/id/1062/100/100'
  },
  {
    id: 2,
    stage: '成年期（1-7岁）',
    advice: '成年犬需要均衡的营养来维持健康的体重和活力。根据狗狗的品种、体型和活动量，选择适合的成年犬粮，并控制喂食量。',
    icon: 'https://picsum.photos/id/1025/100/100'
  },
  {
    id: 3,
    stage: '老年期（7岁以上）',
    advice: '老年犬的代谢减慢，活动量减少，需要低脂肪、易消化的食物。选择专门为老年犬设计的狗粮，注意补充关节健康所需的营养素。',
    icon: 'https://picsum.photos/id/1074/100/100'
  }
]

// 狗狗不能吃的食物
const toxicFoods = [
  { id: 1, name: '巧克力', reason: '含有可可碱，可能导致呕吐、腹泻、癫痫发作甚至死亡' },
  { id: 2, name: '洋葱和大蒜', reason: '含有破坏红细胞的成分，可能导致贫血' },
  { id: 3, name: '葡萄和葡萄干', reason: '可能导致肾功能衰竭，即使少量也可能有毒' },
  { id: 4, name: '酒精', reason: '对狗狗的肝脏和大脑有严重损害，可能导致昏迷甚至死亡' },
  { id: 5, name: '咖啡因', reason: '可能导致心跳加速、癫痫发作和死亡' },
  { id: 6, name: '牛油果', reason: '含有persin，可能导致呕吐和腹泻' }
]
</script>

<template>
  <div class="nutrition-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>狗狗饮食与营养指南</h1>
      <p>了解如何通过合理的饮食让你的狗狗保持健康和活力</p>
    </div>
    
    <!-- 营养主题卡片 -->
    <div class="nutrition-topics">
      <div v-for="topic in nutritionTopics" :key="topic.id" class="nutrition-card">
        <div class="nutrition-header">
          <div class="nutrition-image">
            <img :src="topic.image" :alt="topic.title" />
          </div>
          <h2>{{ topic.title }}</h2>
        </div>
        
        <div class="nutrition-content">
          <div v-for="(paragraph, index) in topic.content.split('\n\n')" :key="index" class="content-paragraph">
            <div v-if="paragraph.startsWith('**')" class="content-heading">
              {{ paragraph.replace(/\*/g, '') }}
            </div>
            <div v-else class="content-text">
              {{ paragraph }}
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 年龄阶段饮食建议 -->
    <div class="age-dietary-advice">
      <h3>不同年龄阶段的饮食建议</h3>
      <div class="advice-grid">
        <div v-for="advice in ageDietaryAdvice" :key="advice.id" class="advice-card">
          <div class="advice-icon">
            <img :src="advice.icon" :alt="advice.stage" />
          </div>
          <h4>{{ advice.stage }}</h4>
          <p>{{ advice.advice }}</p>
        </div>
      </div>
    </div>
    
    <!-- 狗狗不能吃的食物 -->
    <div class="toxic-foods">
      <h3>狗狗不能吃的食物</h3>
      <div class="foods-grid">
        <div v-for="food in toxicFoods" :key="food.id" class="food-card">
          <div class="food-name">{{ food.name }}</div>
          <div class="food-reason">{{ food.reason }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 全局样式变量 */
:root {
  --primary-color: #ff7f00;
  --primary-hover: #e66f00;
  --text-primary: #333;
  --text-secondary: #666;
  --text-light: #999;
  --background-light: #f5f5f5;
  --white: #ffffff;
  --border-color: #e0e0e0;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
  --radius: 8px;
  --transition: all 0.3s ease;
}

/* 页面整体样式 */
.nutrition-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 页面标题 */
.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-header h1 {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 12px 0;
}

.page-header p {
  font-size: 18px;
  color: var(--text-secondary);
  margin: 0;
}

/* 营养主题卡片 */
.nutrition-topics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(550px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.nutrition-card {
  background-color: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: var(--transition);
}

.nutrition-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

/* 营养头部 */
.nutrition-header {
  position: relative;
}

.nutrition-image {
  height: 240px;
  overflow: hidden;
}

.nutrition-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.nutrition-card:hover .nutrition-image img {
  transform: scale(1.05);
}

.nutrition-header h2 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  color: var(--white);
  padding: 30px 24px 20px;
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}

/* 营养内容 */
.nutrition-content {
  padding: 24px;
}

.content-paragraph {
  margin: 0 0 20px 0;
}

.content-paragraph:last-child {
  margin-bottom: 0;
}

.content-heading {
  font-size: 18px;
  font-weight: 600;
  color: var(--primary-color);
  margin: 0 0 12px 0;
}

.content-text {
  color: var(--text-secondary);
  line-height: 1.6;
}

/* 年龄阶段饮食建议 */
.age-dietary-advice {
  background-color: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
  margin-bottom: 40px;
}

.age-dietary-advice h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 24px 0;
  text-align: center;
}

.advice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 24px;
}

.advice-card {
  background-color: var(--background-light);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
}

.advice-icon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 16px;
}

.advice-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.advice-card h4 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px 0;
}

.advice-card p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* 狗狗不能吃的食物 */
.toxic-foods {
  background-color: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
}

.toxic-foods h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 24px 0;
  text-align: center;
}

.foods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.food-card {
  background-color: rgba(220, 53, 69, 0.1);
  border-radius: var(--radius);
  padding: 20px;
  border-left: 4px solid #dc3545;
}

.food-name {
  font-size: 16px;
  font-weight: 600;
  color: #dc3545;
  margin: 0 0 8px 0;
}

.food-reason {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .nutrition-topics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .page-header h1 {
    font-size: 28px;
  }
  
  .page-header p {
    font-size: 16px;
  }
  
  .nutrition-image {
    height: 200px;
  }
  
  .nutrition-header h2 {
    font-size: 20px;
    padding: 24px 20px 16px;
  }
  
  .age-dietary-advice,
  .toxic-foods {
    padding: 24px;
  }
  
  .age-dietary-advice h3,
  .toxic-foods h3 {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .nutrition-page {
    padding: 16px;
  }
  
  .page-header h1 {
    font-size: 24px;
  }
  
  .nutrition-content {
    padding: 20px;
  }
  
  .advice-grid,
  .foods-grid {
    grid-template-columns: 1fr;
  }
}
</style>